<template>
  <el-container class="shouye">
    <el-aside width="200px">
      <el-menu default-active="/index/home/hwj/homepage" @select="handleSelect">
        <!-- <el-menu-item index="/index/register">
<el-icon><Edit /></el-icon>
<span>注册</span>
</el-menu-item>

<el-menu-item index="/index/login">
<el-icon><Edit /></el-icon>
<span>登录</span>
</el-menu-item> -->

        <el-menu-item index="/index/home/hwj/homepage">
          <el-icon><Edit /></el-icon>
          <span>
            <span class="iconfont icon-shouyeshouye"></span>
            首页
          </span>
        </el-menu-item>

        <!-- 左侧垂直下拉菜单 -->
        <el-row class="tac">
          <el-col :span="12">
            <!-- <h5 class="mb-2">Default colors</h5> -->
            <el-menu
              router
              default-active="/index/home"

              class="el-menu-vertical-demo c1" 
              @open="handleOpen"
              @close="handleClose"
              
n

            >
              <el-sub-menu index="/index/home/zqq/employees">
                <template #title>
                  <!-- <el-icon><location /></el-icon> -->

                  <span>用户管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/index/home/xhz/raise"
                    >创建用户</el-menu-item
                  >
                  <el-menu-item index="/index/home/xhz/empower">用户授权</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>

              <el-sub-menu index="2">
                <template #title>
                  <!-- <el-icon><location /></el-icon> -->
                  <span @click="InfoManage">信息管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/index/home/lzn/infoManage/CreateInfo"
                    >创建信息</el-menu-item
                  >
                  <el-menu-item index="/index/home/lzn/infoManage/EditInfo"
                    >编辑信息</el-menu-item
                  >
                  <el-menu-item index="/index/home/lzn/infoManage/InfoDetail"
                    >信息详情</el-menu-item
                  >
                  <el-menu-item index="/index/home/lzn/infoManage/SearchInfo"
                    >搜索信息</el-menu-item
                  >
                  <el-menu-item index="/index/home/lzn/InfoManage/ContactList"
                    >联系人列表</el-menu-item
                  >
                  <el-menu-item index="/index/home/lzn/InfoManage/CreateContact"
                    >创建联系人</el-menu-item
                  >
                </el-menu-item-group>
              </el-sub-menu>

              <el-sub-menu index="/index/home/hwj/business">
                <template #title>
                  <!-- <el-icon><location /></el-icon> -->
                  <span @click="handleSelect1">商机管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/index/home/hwj/business"
                    >创建商机</el-menu-item
                  >
                  <el-menu-item index="/index/home/hwj/businessedit"
                    >编辑商机</el-menu-item
                  >
                  <el-menu-item index="/index/home/hwj/businessdetails"
                    >商机详情</el-menu-item
                  >
                  <el-menu-item index="/index/home/hwj/searchbusiness"
                    >搜索商机</el-menu-item
                  >
                   <el-menu-item index="/index/home/hwj/businesslist2"
                    >商机联系人列表</el-menu-item
                  >
                </el-menu-item-group>
              </el-sub-menu>

           <el-sub-menu index="4">
          <template #title>
            <!-- <el-icon><location /></el-icon> -->
             <span @click="toContract">合同管理</span>
          </template>
          <el-menu-item-group >
            <el-menu-item index="/index/home/lsl/createContract">创建合同</el-menu-item>
            <el-menu-item index="/index/home/lsl/EditContract">编辑合同</el-menu-item>
            <el-menu-item index="/index/home/lsl/ContractDetails">合同详情</el-menu-item>
            <el-menu-item index="/index/home/lsl/SearchContracts">搜索合同</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>


          


           <el-sub-menu index="6">
          <template #title>
            <!-- <el-icon><location /></el-icon> -->
            <span @click="toProduct">产品管理</span>
          </template>
          <el-menu-item-group >
            <el-menu-item index="/index/home/lsl/Newproducts">创建产品</el-menu-item>
            <el-menu-item index="6-2">编辑产品</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>


              <el-sub-menu index="7">
                <template #title>
                  <!-- <el-icon><location /></el-icon> -->
                  <span>员工管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item
                    index="/index/home/zqq/employees/createemployees"
                    >创建员工</el-menu-item
                  >
                  <el-menu-item
                    index="/index/home/zqq/employees/modifyemployees"
                    >编辑员工</el-menu-item
                  >
                  <el-menu-item
                    index="/index/home/zqq/employees/searchemployees"
                    >搜索员工</el-menu-item
                  >
                </el-menu-item-group>
              </el-sub-menu>

              <!-- <el-sub-menu index="5">
                <template #title> -->
                  <!-- <el-icon><location /></el-icon> -->
                  <!-- <span>售后管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="5-1">创建售后日志</el-menu-item>
                  <el-menu-item index="5-2">编辑售后日志</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu> -->

              <!-- <el-sub-menu index="8">
                <template #title> -->
                  <!-- <el-icon><location /></el-icon> -->
                  <!-- <span>系统日志</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/index/home/zqq/logs"
                    >搜索系统日志</el-menu-item
                  >
                </el-menu-item-group>
              </el-sub-menu> -->


            </el-menu>
          </el-col>
        </el-row>
      </el-menu>
    </el-aside>
    <el-main>
      <!-- 渲染二级路由出口 -->
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script setup>
import { useRouter } from "vue-router";
var router = useRouter();
//点击菜单项的回调, 通过参数path可以获取所点击的菜单项的index属性的值
var handleSelect = (path) => {
  router.push(path);

};
var handleSelect1 = (path) => {
  router.push("/index/home/hwj/businesslist");

};

var InfoManage = () => {
  router.push("/index/home/lzn/InfoManage");
};




var toContract = ()=>{
  router.push('/index/home/lsl/contract')
}
var toProduct =()=>{
  router.push('/index/home/lsl/product')
}

</script>

<style>
.el-col {
  max-width: 200px !important;
}
.el-header .el-menu[data-v-8901ba02] {
  width: 100%;
}
.shouye span {
  display: inline-block;
  font-size: 20px;
}
.tac {
  width: 100%;
}
.tac span {
  display: inline-block;
  font-size: 20px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bolder;
}
ul li {
  font-size: 32px;

}

.el-menu-vertical-demo{
    border-right: 1px solid #dcdfe6;
}
.c1{
  width: 200px;
}
</style>